import React, { Fragment } from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import Locale from '@/utils/locale';
// import colors from '@/theme';

const { locale } = new Locale('stat.report');

const getOption = ({
    // avgTurnOutRate = 0,
    cardReplaceNum = 0,
    cardReplaceRate = 0,
    fullAttentanceNum = 0,
    fullAttentanceRate = 0,
    leaveNum = 0,
    leaveRate = 0,
    ortherNum = 0,
    ortherRate = 0
    // sumNum = 0
}) => ({
    tooltip: {
        formatter: '{a}: {c}%'
    },
    grid: {
        right: '50%'
    },
    legend: {
        left: '55%',
        y: 'center',
        data: ['满勤', '请假', '缺卡', '其他异常'],
        textStyle: {
            rich: {
                name: {
                    padding: [0, 10, 0, 0],
                    width: 50
                }
            }
        },
        orient: 'vertical'
    },
    xAxis: {
        show: false,
        type: 'category',
        data: ['Mon']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}%'
        },
        splitNumber: 5,
        min: 0,
        max: 100
    },
    series: [
        {
            data: [fullAttentanceRate],
            value: fullAttentanceNum,
            name: '满勤',
            type: 'bar',
            barGap: '60%',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    fontSize: 12
                }
            }
        },
        {
            data: [leaveRate],
            value: leaveNum,
            name: '请假',
            type: 'bar',
            barGap: '60%',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    fontSize: 12
                }
            }
        },
        {
            data: [cardReplaceRate],
            name: '缺卡',
            value: cardReplaceNum,
            type: 'bar',
            barGap: '60%',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    fontSize: 12
                }
            }
        },
        {
            data: [ortherRate],
            name: '其他异常',
            value: ortherNum,
            type: 'bar',
            barGap: '60%',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    fontSize: 12
                }
            }
        }
    ]
});

const CqlFx = ({ data }) => {
    const {
        avgTurnOutRate = 0,
        cardReplaceNum,
        // cardReplaceRate,
        fullAttentanceNum,
        // fullAttentanceRate,
        leaveNum,
        // leaveRate,
        ortherNum
        // ortherRate,
        // sumNum
    } = data;
    const empty =
        cardReplaceNum === 0 &&
        fullAttentanceNum === 0 &&
        leaveNum === 0 &&
        ortherNum === 0;
    const option = getOption(data);
    return (
        <Card
            bordered={false}
            title={locale('cqlfx')}
            bodyStyle={{
                padding: empty ? 30 : 0
            }}
            style={{ position: 'relative' }}
        >
            {empty ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <Fragment>
                    <div className="descriptionText">
                        <span>
                            平均出勤率<em>{`${avgTurnOutRate}`}%</em>
                        </span>
                    </div>
                    <ReactEcharts
                        legendExtra={[
                            name => {
                                const result = option.series.find(
                                    item => item.name === name
                                );
                                return {
                                    value: result && `${result.value} 人`,
                                    style: {
                                        width: 40,
                                        padding: [0, 0, 0, 5]
                                    }
                                };
                            },
                            name => {
                                const result = option.series.find(
                                    item => item.name === name
                                );
                                return {
                                    value: result && `${result.data[0]} %`,
                                    type: 'increment'
                                };
                            }
                        ]}
                        option={option}
                    />
                </Fragment>
            )}
        </Card>
    );
};

export default CqlFx;
